<script setup lang="ts">
import { ref } from 'vue'
import SubmitView from './View.vue'
import { getWorkflowDatasBySubmit } from '@/api/examples'
import { useUserStore } from '@/store/user'
import SytTable from '@/components/SytTable/SytTable.vue'

const userStore = useUserStore()

let tableThs = ref([
  { title: '任务名', dataIndex: 'name' },
  { title: '状态', dataIndex: 'status' }
])
let tableData = ref([])

let searchName = ref('')

let dialogVisible = ref(false)

let workflowData = ref({
  name: '',
  formData: [],
  flowData: {
    nodesData: [],
    linesData: []
  }
})

const openDialogByEdit = (row) => {
  dialogVisible.value = true
  workflowData.value = row
}

const afterSubmit = () => {
  dialogVisible.value = false
}

const initData = () => {
  getWorkflowDatasBySubmit({ username: userStore.username }).then((res) => {
    tableData.value = res.data
  })
}
initData()
</script>

<template>
  <div>
    <div class="flex">
      <el-input class="search" v-model="searchName" clearable placeholder="输入任务名查询" />
    </div>

    <el-dialog v-model="dialogVisible" width="80%">
      <SubmitView :data="workflowData" @submit="afterSubmit" />
    </el-dialog>
    <SytTable :columns="tableThs" :data="tableData.filter((v) => v.name.includes(searchName))">
      <template #operations="scope">
        <el-button
          size="small"
          type="primary"
          @click="openDialogByEdit(scope.row)"
          icon="View"
          circle
        />
      </template>
    </SytTable>
  </div>
</template>

<style scoped>
.search {
  width: 150px;
  margin-left: 10px;
}
</style>
@/api/examples
